<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg" />
            <div>{{msg | upper}}</div>
            <div>{{msg | upper | lower}}</div>
            <div v-bind:id="msg | upper"></div>
            <div>{{myDate | format('yyyy-MM-dd hh:mm:ss')}}</div>
        </div>
        <script>
            /* 全局过滤器 */
            // Vue.filter('upper', function(val) {
            //     return val.charAt(0).toUpperCase() + val.slice(1);
            // });
            // Vue.filter('lower', function(val) {
            //     return val.charAt(0).toLowerCase() + val.slice(1);
            // });
            var app = new Vue({
                el: '#app',
                data: {
                    msg: 'nihao',
                    myDate: new Date()
                },
                // 局部过滤器
                filters: {
                    upper: function(val) {
                        return val.charAt(0).toUpperCase() + val.slice(1);
                    },
                    lower: function(val) {
                        return val.charAt(0).toLowerCase() + val.slice(1);
                    },
                    format: function(value, arg) {
                        function dateFormat(date, format) {
                            if (typeof date === 'string') {
                                var mts = date.match(/(\/Date\((\d+)\)\/)/);
                                if (mts && mts.length >= 3) {
                                    date = parseInt(mts[2]);
                                }
                            }
                            date = new Date(date);
                            if (!date || date.toUTCString() == 'Invalid Date') {
                                return '';
                            }
                            var map = {
                                M: date.getMonth() + 1, //月份
                                d: date.getDate(), //日
                                h: date.getHours(), //小时
                                m: date.getMinutes(), //分
                                s: date.getSeconds(), //秒
                                q: Math.floor((date.getMonth() + 3) / 3), //季度
                                S: date.getMilliseconds() //毫秒
                            };

                            format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                                var v = map[t];
                                if (v !== undefined) {
                                    if (all.length > 1) {
                                        v = '0' + v;
                                        v = v.substr(v.length - 2);
                                    }
                                    return v;
                                } else if (t === 'y') {
                                    return (date.getFullYear() + '').substr(4 - all.length);
                                }
                                return all;
                            });
                            return format;
                        }
                        return dateFormat(value, arg);
                    }
                }
            });
        </script>
    </body>
</html>
